<template>
  <view class="paitent">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="就诊人管理" />
    </view>
    <view class="container">
      <view class="list-container">
        <view class="list-item" v-for="(item, index) in listData" :key="index">
          <view class="item-main">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-relation">({{ item.relation }})</text>
          </view>
          <view class="item-details">
            <text class="item-id">身份证号码: ******{{ item.cardNum.slice(-4) }}</text>
            <text class="item-phone">电话: {{ item.phone }}</text>
          </view>
          <view class="item-do" @click="gotoCreate(item.id)">
            编辑
          </view>
        </view>
      </view>
      <view v-if="listData.length === 0" class="no-data-image">
        <image src="http://122.114.92.39:9000/xingyue/system/nonedata.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="card" @click="gotoCreate">
      <view class="buy-btn">添加就诊人</view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    useUserInfo
  } from '@/stores/userinfo.js';
  import {
    useSwitch
  } from '@/stores/switch.js'
  import {
    ref,
    watch
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const userInfo = useUserInfo()
  onLoad(() => {
    //判断登录信息
    userInfo.getLoginInfo()
     fetchPaitentList()
  })

  function goback() {
    uni.navigateBack()
  }
  const listData = ref([])
  async function fetchPaitentList() {
    //获取陪诊数据
    const result = await http.getRequest("/peizhen/paitent/page", {
      pageNo: 1,
      pageSize: 50,
      memberId: userInfo.loginData.userId
    })
    if (result.code == 0) {
      listData.value = result.data.list
    } else {
      uni.showToast({
        title: '获取陪诊人信息失败',
        icon: 'error',
        duration: 1000
      })
    }
  }
  //创建就诊人
  function gotoCreate(id) {
    uni.navigateTo({
      url: `/pages/paitent/create-paitent/create-paitent?id=${id}`
    })
  }

  watch(() => useSwitch().reloadPaitent, (newCode, oldCode) => {
    console.log('newCode', newCode);
    console.log('oldCode', oldCode);
    if (newCode) {
      fetchPaitentList()
      useSwitch().controlReloadPaitent(false)
    }
  });
</script>

<style lang="scss">
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .paitent {
    position: relative;
  }

  .container {
    background-color: #f9f9f9;
    /* 容器背景色 */
  }

  .list-container {
    display: flex;
    flex-direction: column;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 27rpx;
    background-color: #fff;
    /* 列表项背景色 */
    border: 1px solid #ddd;
    /* 列表项边框 */
    border-radius: 5px;
    /* 边框圆角 */
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    padding: 25rpx;
    /* 内边距 */
    transition: all 0.3s ease;
    /* 过渡效果，用于鼠标悬停等交互 */
    position: relative;
  }

  .list-item:hover {
    transform: translateY(-2px);
    /* 鼠标悬停时微微上移 */
    box-shadow: 0 8rpx 15rpx rgba(0, 0, 0, 0.2);
    /* 加深阴影效果 */
  }

  .list-item:last-child {
    margin-bottom: 0;
  }

  .item-main {
    display: flex;
    align-items: center;
  }

  .item-name {
    font-size: 31rpx;
    font-weight: bold;
    color: #333;
    /* 姓名字体颜色 */
    margin-right: 18rpx;
  }

  .item-relation {
    font-size: 27rpx;
    color: #666;
    font-weight: normal;

  }

  .item-details {
    display: flex;
    flex-direction: column;
    margin-top: 18rpx;
    /* 与上方内容的间距 */
  }

  .item-id,
  .item-phone {
    font-size: 24rpx;
    color: #555;
    /* 详细信息字体颜色 */
    margin-top: 10rpx;
  }

  .item-do {
    background-color: #22b9a3;
    color: #f9f9f9;
    width: 150rpx;
    text-align: center;
    padding: 10rpx;
    border-radius: 50rpx;
    position: absolute;
    top: 60rpx;
    right: 30rpx;
  }

  .no-data-image image{
    position: absolute;
    top: 600rpx;
    left: 10%;
    width: 658rpx;
    height: 526rpx;
  }

  .card {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    text-align: center;
    padding: 20rpx;
    // border: 1rpx solid #ddd;
    border-radius: 10rpx;
    background-color: #fff;
  }


  .buy-btn {
    margin: 10rpx;
    padding: 10rpx 40rpx;
    width: 80%;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #22b9a3;
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    font-size: 35rpx;
  }
</style>